<script setup>
import imgPlay from '@/assets/image/index/icon-play.png'
import imgSysLuoshu from '@/assets/image/index/sys-luoshu.png'
import imgSysGuankong from '@/assets/image/index/sys-guankong.png'

defineProps({
  systemLuoshuLink: {
    type: String,
    default: '',
  },
  systemDigitalLink: {
    type: String,
    default: '',
  },
})

const goOpenLink = (link) => {
  if(!link) {
    window.$notice.error({
      title: '系统提醒',
      content: '未配置此外部系统链接地址',
      duration: 2000,
    })
    return
  }
  window.open(link, '_blank')
}
</script>

<template>
  <section class="sysnav-card">
    <div class="sysnav-card__item" @click="goOpenLink(systemDigitalLink)">
      <n-image
        class="sysnav-card__img"
        width="92%"
        :src="imgSysGuankong"
        preview-disabled
      />
      <n-image
        class="sysnav-card__icon"
        width="100%"
        :src="imgPlay"
        preview-disabled
      />
      <div class="sysnav-card__text">
        <p>数字化</p>
        <p>管控系统</p>
      </div>
    </div>
    <div class="sysnav-card__item" @click="goOpenLink(systemLuoshuLink)">
      <n-image
        class="sysnav-card__img"
        width="92%"
        :src="imgSysLuoshu"
        preview-disabled
      />
      <n-image
        class="sysnav-card__icon"
        width="100%"
        :src="imgPlay"
        preview-disabled
      />
      <div class="sysnav-card__text">
        <p>洛书</p>
        <p>系统</p>
      </div>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.sysnav-card {
  display: flex;
  justify-content: space-between;
  height: 100%;

  &__item {
    @apply bg-cover bg-center bg-no-repeat cursor-pointer;

    position: relative;
    flex: 1;
    min-width: 0;
    background-image: url('/src/assets/image/index/bg-jump-card.png');

    &+& {
      margin-left: 30px;
    }
  }

  &__img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -75%);
  }

  &__icon {
    position: absolute;
    top: 16px;
    right: 16px;
  }

  &__text {
    position: absolute;
    bottom: 16px;
    left: 50%;
    font-family: $font-sub;
    font-size: 30px;
    font-weight: 400;
    line-height: 36px;
    color: transparent;
    text-align: center;
    background: linear-gradient(273deg,#fff 0%, #00adff 100%);
    background-clip: text;
    transform: translateX(-50%);

    p {
      margin: 0;
    }
  }
}
</style>
